import React, { useState } from 'react';
import { Row, Col } from 'antd';
import UserCard, { IUser } from './components/UserCard';
import img from '../../assets/images/scenery.jpg';
import TodoList from '../../components/TodoList'

const Profile = () => {
  const [ userState ] = useState<IUser>({
    name: "lisashare",
    role: "admin",
    // email: "lisashare",
    avatar: img  
  })
  
  return (
    <>
      <Row gutter={20}>
        <Col span="8" xs="24">
          <UserCard {...userState} />
        </Col>
        <Col span="16" xs="24">
          <TodoList />
        </Col>
      </Row>
    </>
  )
}

export default Profile;

// <el-card>
//   <el-tabs v-model="activeTab">
//     <el-tab-pane label="Activity" name="activity">
//       <activity />
//     </el-tab-pane>
//     <el-tab-pane label="Timeline" name="timeline">
//       <timeline />
//     </el-tab-pane>
//     <el-tab-pane label="Account" name="account">
//       <account :user="user" />
//     </el-tab-pane>
//   </el-tabs>
// </el-card>
